<template>
    <div class="bgc">

        <div class="login-box">
            <h3>登录</h3>
            <div class="input-box">

                用户名：<input type="text" v-model="userName" placeholder="请输入用户名(1-6位英文字母)">
            </div>
            <div class="input-box">
                密&emsp;码：<input type="password" v-model="userPwd" placeholder="请输入密码">
            </div>
            <el-button type="warning" @click="loginFn">登录</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { AxiosResponse } from "axios";
import { ElMessage } from "element-plus";
import { ref } from "vue"
import { useRouter } from "vue-router";
import service from "../utils/service";

const userName = ref<string>()
const userPwd = ref<string>()
const router = useRouter()
const sendLogin = () => {
    if (userName.value && userPwd.value) {
        let userReg = /^[A-Za-z]{1,6}$/
        let passwordReg = /^.{6,18}$/

        if (userReg.test(userName.value) && passwordReg.test(userPwd.value)) {

            service({
                url: `/admin/login`,
                method: "post",
                data: {
                    adminname: userName.value,
                    password: userPwd.value
                }
            }).then((res: AxiosResponse) => {

                if (res.data.code === "200") {
                    sessionStorage.setItem("adminname", res.data.data.adminname)
                    sessionStorage.setItem("token", res.data.data.token)
                    sessionStorage.setItem("role", res.data.data.role)
                    sessionStorage.setItem("grants", JSON.stringify(res.data.data.checkedkeys))
                    router.push("/Home")
                } else if (res.data.code === "10003") {
                    ElMessage({
                        showClose: true,
                        message: "密码错误，请输入正确密码，亲！！！",
                        type: "error"
                    })
                } else if (res.data.code === "10005") {
                    ElMessage({
                        showClose: true,
                        message: "该用户名没有注册，亲！！！",
                        type: "error"
                    })
                }
            })
        } else {
            ElMessage({
                showClose: true,
                message: "请输入格式正确用户名密码，亲！！！",
                type: "error"
            })
        }
    } else {
        ElMessage({
            showClose: true,
            message: "请输入用户名密码，亲!!!!",
            type: "error"
        })
    }
}
const loginFn = () => {
    sendLogin()
}
document.onkeydown = (evt) => {
    let e = evt
    // 获取Asc码值的兼容写法
    let key = e.code
    if (key == "Enter") {
        sendLogin()
    }
}

</script>

<style scoped>
h3 {
    margin-bottom: 20px;
    color: orange;
}

.bgc {
    width: 100%;
    height: 100%;
    background-image: url("http://newstu.1000phone.net/static/img/bg1.5ea94ef.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.login-box {
    width: 300px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 20px;
}

.login-box .input-box {
    width: 230px;
    height: 30px;
    border-bottom: 1px solid orange;
    margin-bottom: 10px;
}

.login-box .input-box input {
    border: 0;
    outline: none;
}

.el-button--warning {
    align-self: end;
    margin-right: 20px;
}
</style>